<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图例1</title>
    <link rel="stylesheet" href="inder1.css">
    <script src="./echarts.js"> </script>
</head>

<body>
    <div class="yi">
        <div class="da" style="width: 100vw;">
            <div class="abc">
                <div id="suh" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('suh'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {

                        title: {
                            text: '石工程本周气温预计',
                            left: 'center',
                            borderWidth: 3,
                            borderColor: '#333'
                        },
                        visualMapContinuous: {
                            borderWidth: "5px"
                        },

                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [20, 22, 26, 30, 32, 31, 35],
                                type: 'line'
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

            <div class="abc">
                <div id="suha" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('suha'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '石工程每天课程数量',
                            left: 'center'
                        },
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [1320, 1020, 900, 854, 1120, 980, 860],
                                type: 'line',
                                smooth: true
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

            <div class="abc">
                <div id="suhao" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('suhao'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '石工程超市饮料出售记录',
                            left: 'center'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量'],
                            right: 30
                        },
                        xAxis: {
                            data: ['可乐', '雪碧', '红茶', '普洱茶', '茉莉茶', '绿茶']
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                data: [700, 500, 480, 210, 550, 350]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

        </div>
        <div class="zhong">
            <div class="abc">
                <div id="su" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('su'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '石工程各系学生人数百分图',
                            // subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top: 20
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    { value: 1048, name: '信息 ' },
                                    { value: 735, name: '汽车' },
                                    { value: 973, name: '人文' },
                                    { value: 484, name: '建筑' },
                                    { value: 800, name: '食品' }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    setTimeout(() => {

                    }, 6000)
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

            <div class="abc">
                <div id="qe" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('qe'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        xAxis: {},
                        yAxis: {},
                        series: [
                            {
                                data: [
                                    [10, 40],
                                    [50, 100],
                                    [40, 20]
                                ],
                                type: 'line'
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

            <div class="abc">
                <div id="qr" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('qr'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '参加运动会学生人数',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                padAngle: 5,
                                itemStyle: {
                                    borderRadius: 10
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 40,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 1048, name: '跑步' },
                                    { value: 735, name: '跳高' },
                                    { value: 580, name: '跳远' },
                                    { value: 484, name: '篮球' },
                                    { value: 300, name: '足球' }
                                ]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            SetTimeout(( )=>{
                h1.setAttribute('class','kk')
            },5000)
            SetInterval(()=>{
                console.log(111);
            },10000)
            </div>


        </div>
        <div class="xiao">
            <div class="abc">
                <div id="ad" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('ad'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        xAxis: {},
                        yAxis: {},
                        series: [
                            {
                                symbolSize: 10,
                                data: [
                                    [10.0, 8.04],
                                    [8.07, 6.95],
                                    [13.0, 7.58],
                                    [9.05, 8.81],
                                    [11.0, 8.33],
                                    [14.0, 7.66],
                                    [13.4, 6.81],
                                    [10.0, 6.33],
                                    [14.0, 8.96],
                                    [12.5, 6.82],
                                    [9.15, 7.2],
                                    [11.5, 7.2],
                                    [3.03, 4.23],
                                    [12.2, 7.83],
                                    [2.02, 4.47],
                                    [1.05, 3.33],
                                    [4.05, 4.96],
                                    [6.03, 7.24],
                                    [12.0, 6.26],
                                    [12.0, 8.84],
                                    [7.08, 5.82],
                                    [5.02, 5.68]
                                ],
                                type: 'scatter'
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

            <div class="abc">
                <div id="af" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('af'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        xAxis: {
                            data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
                        },
                        yAxis: {},
                        series: [
                            {
                                type: 'candlestick',
                                data: [
                                    [20, 34, 10, 38],
                                    [40, 35, 30, 50],
                                    [31, 38, 33, 44],
                                    [38, 15, 5, 42]
                                ]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

            <div class="abc">
                <div id="zc" style="width:calc(100vw/3);height:calc(100vh/3);"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('zc'), 'dark');

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '沈腾/马丽 受众群体图'
                        },
                        legend: {
                            data: ['沈腾', '马丽']
                        },
                        radar: {
                            // shape: 'circle',
                            indicator: [
                                { name: '医生', max: 6500 },
                                { name: '学生', max: 16000 },
                                { name: '教师', max: 30000 },
                                { name: '警察', max: 38000 },
                                { name: '厨师', max: 52000 },
                                { name: '商贩', max: 25000 }
                            ]
                        },
                        series: [
                            {
                                name: '沈腾 vs 马丽',
                                type: 'radar',
                                data: [
                                    {
                                        value: [4200, 3000, 20000, 35000, 50000, 18000],
                                        name: '沈腾'
                                    },
                                    {
                                        value: [5000, 14000, 28000, 26000, 42000, 21000],
                                        name: '马丽'
                                    }
                                ]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>
            </div>

        </div>
    </div>


</body>

</html>